<!--  -->
<template>
    <el-button icon="RefreshRight" circle @click="updateRefsh"></el-button>
    <el-button icon="FullScreen" circle @click="fullScreen"></el-button>
    <!-- <el-popover placement="bottom" title="主题设置" :width="300" trigger="hover">
        <el-form>
            <el-form-item label="主题颜色">
                <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="changeColor" />
            </el-form-item>
            <el-form-item label="暗黑模式">
                <el-switch v-model="dark" size="large" inline-prompt inactive-icon="Sunny" active-icon="MoonNight"
                    @change="changeDark" />
            </el-form-item>

        </el-form>
        <template #reference>
            <el-button icon="Setting" circle></el-button>
        </template>
    </el-popover> -->
    <el-color-picker style="margin-left: 10px;" v-model="color" show-alpha :predefine="predefineColors"
        @change="changeColor" />
    <el-tooltip content="暗黑模式" placement="bottom" effect="light">
        <el-switch style="margin-left: 10px;" v-model="dark" size="large" inline-prompt inactive-icon="Sunny"
            active-icon="MoonNight" @change="changeDark" />
    </el-tooltip>


    <img :src="userStore.avatar" alt="">
    <!-- 下拉菜单 -->
    <el-dropdown class="dropdown">
        <span class="el-dropdown-link">
            {{ userStore.username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 引入小仓库
import useUserStore from '../../../../store/modules/user';
import useSettingStore from '../../../../store/modules/setting'
import { useRouter, useRoute } from "vue-router";

let userStore = useUserStore()
let settingStore = useSettingStore()
let $router = useRouter()
let $route = useRoute()

const color = ref('rgba(255,255,255,1)')
const dark = ref(true)
const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])
// 刷新内容
const updateRefsh = () => {
    settingStore.refsh = !settingStore.refsh
}

// 全屏
const fullScreen = () => {
    // document.fullscreenElement DOM的一个属性 可以判断当前项目是否是全屏模式 全屏返回：true 不是全屏返回：false
    let full = document.fullscreenElement
    // 如果不是全屏
    if (!full) {
        // 变成全屏
        // 文档根节点的方法：requestFullscreen 实现全屏模式
        document.documentElement.requestFullscreen()
        // 对不同浏览器 进行兼容
        // let element = document.documentElement
        // if (element.requestFullscreen) {
        //     element.requestFullscreen();//谷歌
        // } else if (element.mozRequestFullScreen) { /* Firefox */
        //     element.mozRequestFullScreen();
        // } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        //     element.webkitRequestFullscreen();
        // } else if (element.msRequestFullscreen) { /* IE/Edge */
        //     element.msRequestFullscreen();
        // }

    } else {
        //当前已经是全屏模式 则 退出全屏模式
        document.exitFullscreen()
        // 退出全屏模式
        // if (document.exitFullscreen) {
        //     document.exitFullscreen(); //谷歌
        // } else if (document.mozCancelFullScreen) { /* Firefox */
        //     document.mozCancelFullScreen();
        // } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        //     document.webkitExitFullscreen();
        // } else if (document.msExitFullscreen) { /* IE/Edge */
        //     document.msExitFullscreen();
        // }
    }
}

// 退出登录
const loginout = async () => {
    await userStore.userLoginout()
    $router.push({
        path: '/login',
        query: {
            redirect: $route.path
        }
    })
}

// 暗黑模式
const changeDark = () => {
    // 获取html根节点
    let html = document.documentElement
    // 判断html标签是否有class:dark
    dark.value ? html.className = 'dark' : html.className = ''
}
// 改变主题颜色
const changeColor = () => {
    // 获取html根节点
    const html = document.documentElement
    html.style.setProperty('--el-color-primary', color.value)
    html.style.setProperty('--el-color-danger', color.value)
    html.style.setProperty('--el-color-success', color.value)
    html.style.setProperty('--el-color-warning', color.value)

}
</script>

<style lang="scss" scoped>
img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 5px 0 12px;
}

.el-button:hover {
    background-color: #f1f8f6;
    color: #11A983;
    border-color: #a6d7cb;
}
</style>